<template>
    <el-container>
      <el-header class="header">
        <div class="left-panel">
          <el-form class="search-form" ref="formRefSearch" :inline="true" :model="formSearch">
            <el-form-item label="操作时间" prop="datetime">
              <el-date-picker v-model="formSearch.datetime" :shortcuts="getPickerShortcuts()" type="datetimerange"
                range-separator="至" start-placeholder="开始日期时间" end-placeholder="结束日期时间" />
            </el-form-item>
            <el-form-item>
              <el-button type="success" icon="Search" @click="onSearch">搜索</el-button>
              <el-button type="info" icon="RefreshLeft" @click="resetForm(formRefSearch)">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <el-main class="main">
        <el-table border :data="operationLogArr" height="calc(100vh - 280px)" :stripe="true" :highlight-current-row="true"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" :selectable="selectable" width="55" />
          <el-table-column type="index" label="序号" width="80px" align="center"></el-table-column>
          <el-table-column label="操作人员" prop="operUser" align="center">
          </el-table-column>
          <el-table-column label="操作模块" prop="title" align="center">
          </el-table-column>
          <el-table-column label="操作类型" prop="requestMethod" align="center">
          </el-table-column>
          <el-table-column label="操作IP" prop="operIp" align="center">
          </el-table-column>
          <el-table-column label="操作地点" prop="operLocation" align="center">
          </el-table-column>
          <el-table-column label="操作接口" prop="method" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="请求参数" prop="requestParam" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="响应结果" prop="requestResult" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="操作时间" prop="dateTime" align="center">
          </el-table-column>
        </el-table>
        <el-pagination class="pagination" @size-change="sizeChange" @current-change="getLoginLog" :pager-count="9"
          v-model:current-page="pageNo" v-model:page-size="limit" :page-sizes="[10, 20, 50, 100]" :background="true"
          layout="total,sizes,prev, pager, next, jumper" :total="total" />
      </el-main>
    </el-container>
  </template>
  
  <script lang='ts' setup>
  import { onMounted, reactive, ref } from 'vue';
  import { getPickerShortcuts } from "@/utils/datepicker";
  import { getOperationLogListApi } from "@/api/modules/log"
  
  const loading = ref(false);
  let operationLogArr = ref([]);
  let pageNo = ref<number>(1);
  let limit = ref<number>(20);
  let total = ref<number>(0);
  let pageCon = reactive({
    PageNum: pageNo.value,
    PageSize: limit.value
  })
  let formRefSearch = ref();
  let formSearch = reactive({
    title: '',
    datetime: [],
    datetimestart: '',
    datetimeend: ''
  })
  const selectable = (row) => ![1].includes(row.id)
  let deleteIds = reactive([])
  const today = new Date();
  const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
  startOfMonth.setHours(0, 0, 0, 0);
  const endOfMonth = new Date(
    today.getFullYear(),
    today.getMonth() + 1,
    0
  );
  endOfMonth.setHours(23, 59, 59, 999);
  
  onMounted(() => {
    formSearch.datetime = [startOfMonth, endOfMonth]
    getLoginLog();
  });
  const getLoginLog = async (pager = 1) => {
    pageNo.value = pager;
    if (formSearch.datetime.length > 0) {
      formSearch.datetimestart = formSearch.datetime[0];
      formSearch.datetimeend = formSearch.datetime[1];
    }
    let result = await getOperationLogListApi({ ...formSearch, ...pageCon });
    if (result?.status == 200) {
      total.value = result.response.dataCount;
      operationLogArr.value = result.response.data;
    }
  }
  const sizeChange = () => {
    getLoginLog();
  }
  const handleSelectionChange = (val: []) => {
    deleteIds = val
  }
  const onSearch = () => {
    loading.value = true;
    getLoginLog();
    loading.value = false;
  }
  const resetForm = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
    formSearch.datetime = [startOfMonth, endOfMonth]
    onSearch();
  }
  </script>
  <style scoped lang='scss'></style>